<template>
  <div class="h-full subjectAll-box">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form ref="filterForm" :elements="elements" @submit="submit">
          <template>
            <el-button icon="el-icon-upload">下载模板</el-button>
            <el-button icon="el-icon-upload2">导入</el-button>
            <el-button icon="el-icon-download">导出</el-button>
          </template>
        </filter-form>
      </template>
      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="tableEl"
            :pagination="pagination"
            @paginationChange="paginationChange"
          >
            <template #action="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-edit-outline action"
                  @click="editFun(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-delete action red"
                  @click="removeFun(scope.row)"
                />
              </el-tooltip>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>
    <Drawer
      :visible="drawerVisible"
      title="编辑资产类科目对照"
      width="35%"
      :footer-btns="footerBtns"
      @submit="drawerSubmit"
      @cancel="drawerCancel"
    >
      <template>
        <el-form ref="drawerForm" :model="drawerForm" :rules="drawerRules" label-width="110px" class="mx-15 mt-10">
          <el-form-item label="卡片编号" prop="subjectName">
            <el-input v-model="drawerForm.subjectName" placeholder="请输入预算科目名称" />
          </el-form-item>
          <el-form-item label="卡片名称" prop="subjectCode">
            <el-input v-model="drawerForm.subjectCode" placeholder="请输入预算科目编码" />
          </el-form-item>
          <el-form-item label="预算科目名称" prop="subjectType">
            <el-select v-model="drawerForm.subjectType" placeholder="请选择用友科目编码" class="w-full">
              <el-option v-for="item in accountList" :key="'subjectType' + item.id" :label="item.dictionaryName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="预算科目编码" prop="subjectCode">
            <el-input v-model="drawerForm.subjectCode" placeholder="请输入用友科目名称" />
          </el-form-item>
        </el-form>
      </template>
    </Drawer>
  </div>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'

export default {
  name: 'BusinessSubject', // 部门对照
  components: {},
  mixins: [baseFilterTable],
  props: {},
  data() {
    return {
      baseInfo: {
        searchBarShow: true
      },
      tableData: [],
      tableEl: [
        {
          type: 'selection'
        },
        {
          title: '卡片名称',
          dataIndex: 'columnTw'
        },
        {
          title: '卡片编码',
          dataIndex: 'columnTh'
        },
        {
          title: '预算科目名称',
          dataIndex: 'columnF'
        },
        {
          title: '预算科目编码',
          dataIndex: 'columnF'
        },
        {
          title: '状态',
          dataIndex: 'columnF'
        },
        {
          title: '创建时间',
          dataIndex: 'columnF'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      elements: [
        {
          label: '卡片名称',
          type: 'input',
          key: 'input',
          value: ''
        },
        {
          label: '预算科目名称',
          type: 'input',
          key: 'input',
          value: ''
        },
        {
          label: '状态',
          type: 'select',
          options: [],
          key: 'select',
          itemValue: 'departmentCode',
          itemLabel: 'departmentName',
          value: ''
        }
      ],
      accountList: [], // 科目编码列表
      footerBtns: [
        {
          text: '保存',
          type: 'primary',
          loading: false,
          trigger: 'submit'
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      drawerForm: {}
    }
  },
  created() {},
  mounted() {},
  methods: {
    getData(val) {
    },
    // 编辑
    editFun(row) {
      this.drawerVisible = true
    },
    removeFun(item) {
      this.$confirm({
        content: '此操作将删除系统与用友的对照关系,并无法恢复, 是否继续?',
        title: '确认提示',
        okFn: async(res) => {
          // const params = {
          //   id: item.num,
          //   yard: item.yard
          // }
          // try {
          //   const { data } = await deleteByNum(params)
          //   if (data.code === 200) {
          //     this.$message.success(data.message || '操作成功')
          //     this.$refs.filterForm.submitFormFilter()
          //   } else {
          //     this.$message.error(data.message || '操作失败')
          //   }
          // } catch (error) {
          //   console.log(error)
          // }
        }
      })
    },
    // 抽屉 提交
    drawerSubmit() {
      this.$refs.drawerForm.validate((valid) => {
        if (valid) {
          // this.drawerForm.firstId = this.drawerForm.parent && this.drawerForm.parent[0]
          // this.drawerForm.parent = this.drawerForm.parent && this.drawerForm.parent[this.drawerForm.parent.length - 1]
          // this.footerBtns[0].loading = true
          // saveOrUpdateYsSubject(this.drawerForm).then(res => {
          //   if (res.code === 200) {
          //     this.getData(this.searchParams)
          //     this.drawerCancel()
          //   } else {
          //     this.$message.error('提交失败')
          //   }

          //   this.footerBtns[0].loading = true
          // })
        }
      })
    },
    // 抽屉 关闭
    drawerCancel() {
      this.$refs.drawerForm.resetFields()
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red{
  color: #F56C6C;
}
/deep/.el-textarea__inner {
  min-height: 160px !important;
}
</style>
